<template>
  <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>
    <div class="sign-up-container">
      <el-form ref="userForm" :model="params" :rules="rules">

        <el-form-item class="input-prepend restyle" prop="userId" >
          <div>

            <el-input v-if="radio == '1'" type="text" placeholder="你的学号" v-model="params.userId"/>
            <el-input v-else type="text" placeholder="你的学工号" v-model="params.userId"/>
            <i class="iconfont icon-user"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle" prop="password" >
          <div>
            <el-input type="password" placeholder="设置密码" v-model="params.password"/>
            <i class="iconfont icon-password"></i>
          </div>
        </el-form-item>


        <el-form-item class="input-prepend" prop="checkPass" >
          <div>
            <el-input type="password" placeholder="重复输入密码" v-model="checkPass"/>
            <i class="iconfont icon-password"></i>
          </div>
        </el-form-item>

        <div class="btn">
          <input type="button" class="sign-up-button" value="注册" @click="submitRegister('userForm')" :disabled="loading">
        </div>
        <p class="sign-up-msg">
          点击 “注册” 即表示您同意并愿意遵守
          <br>
          <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
          和
          <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
        </p>
      </el-form>
      <!-- 更多登录方式 -->
      <div class="more-sign">
        <h2>-----------------------身份选择-----------------------</h2>
        <el-row style="margin-top: 20px;">
          <el-radio v-model="radio" label="1" style="margin-right: 30px;">学生登录</el-radio>
          <el-radio v-model="radio" label="2" style="margin-left: 30px;">教师登录</el-radio>
        </el-row>
      </div>
    </div>
  </div>
</template>


<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import cookie from 'js-cookie'
import registerApi from '@/api/register'
import loginApi from '@/api/login'


export default {
  layout: 'sign',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.checkPass !== '') {
          this.$refs.userForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (this.checkPass === '') {
        callback(new Error('请再次输入密码'));
      } else if (this.checkPass !== this.params.password) {
        console.log('validatePass2:', this.params.password)
        console.log('validatePass2:', this.checkPass)
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      radio: '1',
      loading: false,
      params: { //封装注册输入数据
        userId: '',
        password: '',
      },
      checkPass: '',
      sending: true,      //是否发送验证码
      second: 60,        //倒计时间
      codeTest: '获取验证码',
      rules:{
        userId:[
          { min:1,max:100, message: '学号应该在1-100位', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' },
          { min:6,max:14, message: '密码应该在6-14位', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
      stuRegister() {
        this.loading = true;
        registerApi.registerMember(this.params)
          .then(response => {
            let registerInfo = response.data
            if (registerInfo.success) {
              this.$message({
                type: 'success',
                message: "注册成功"
              })
              cookie.set('token',registerInfo.data.token,{domain: 'localhost'})

              loginApi.getMemberInfo()
                .then(response =>{
                  this.loginInfo = response.data.data
                  cookie.set('userInfo',this.loginInfo,{domain: 'localhost'})
                  cookie.set('isTea',0,{domain: 'localhost'})
                  console.log('getStuInfo: ', cookie.get('userInfo'))
                  this.loading=false
                  this.$router.push({path:'/'})
                })
            }
            else {
              this.$message({
                type: 'error',
                message: registerInfo.message
              })
              this.params.userId = ''
              this.params.password = ''
              this.checkPass = ''
              this.loading=false
            }
          })
      },
      teaRegister(){
        this.loading = true;
        registerApi.registerTeacher(this.params)
          .then(response => {
            let registerInfo = response.data
            if (registerInfo.success) {
              this.$message({
                type: 'success',
                message: "注册成功"
              })
              cookie.set('token',registerInfo.data.token,{domain: 'localhost'})

              loginApi.getTeaInfo()
                .then(response =>{
                  console.log("tea")
                  this.loginInfo = response.data.data
                  cookie.set('userInfo',this.loginInfo,{domain: 'localhost'})
                  cookie.set('isTea',1,{domain: 'localhost'})
                  console.log('getTeaInfo: ', cookie.get('teaInfo'))
                  this.loading=false
                  this.$router.push({path:'/'})
                })
            }
            else {
              this.$message({
                type: 'error',
                message: registerInfo.message
              })
              this.params.userId = ''
              this.params.password = ''
              this.checkPass = ''
              this.loading=false
            }
          })
      },
      //注册提交的方法
      submitRegister(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid){  
          if(this.radio === "1"){
            this.stuRegister()
          }
          else{
            this.teaRegister()
          }
        }
        else{
          console.log('error submit!!');
          return false;
        }
      })


      
      },
      timeDown() {
      let result = setInterval(() => {
        --this.second;
        this.codeTest = this.second
        if (this.second < 1) {
          clearInterval(result);
          this.sending = true;
          //this.disabled = false;
          this.second = 60;
          this.codeTest = "获取验证码"
        }
      }, 1000);


    },
      //通过输入手机号发送验证码
      getCodeFun() {
        registerApi.sendCode(this.params.mobile)
        .then(response => {
            this.sending = false
            //调用倒计时的方法
            this.timeDown()
        })
      },


    checkPhone (rule, value, callback) {
      //debugger
      if (!(/^1[34578]\d{9}$/.test(value))) {
        return callback(new Error('手机号码格式不正确'))
      }
      return callback()
    }
  }
}
</script>


